<template>
    <nav class="nav">
        <a v-for="nav in navs" v-link="{name: 'channel', params: {id: nav.i}}">{{nav.n}}</a>
    </nav>
    <div class="onepx"></div>
</template>

<script>
import store from './../../store'
import utils from './../../utils'

export default {
    name: 'NavView',
    data () {
        return {
            navs: store.navConfig.channels
        }
    }
}
</script>

<style>
    .nav{
        display: -webkit-box;
        display: flex;
        width: 100%;
        height: 46px;
        font-size: 15px;
        line-height: 46px;
        text-align: center;
        background-color: #f9f9f9;
    }

    .nav a{
        display: block;
        -webkit-box-flex: 1;
        flex: 1;
        color: #c5c5c5;
    }

    .nav .v-link-active{
        position: relative;
        z-index: 9;
        border-bottom: 2px solid #ffb400;
        color: #272727;
    }

    .onepx{
        width: 100%;
        height: 1px;
        background-color: #a0a0a0;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
</style>